import { Button, Form, Popconfirm, Space, Switch, Table } from 'antd';
import React, { use, useEffect, useState } from 'react'
import request from '../../utils/request';
import { getSchemaListApi } from '../../api/http';
import dayjs from 'dayjs'
import TabCom from './components/TabCom';
import FormBox from './components/FormBox';
import SeachForm from './components/SeachForm';
function OrderList() {
    const [arr, setArr] = useState([])
    // 分页
    const [total, setTotal] = useState(0)
    const [pageNum, setPageNum] = useState(1)
    const [pageSize, setPageSize] = useState(5)

    // 搜索
    const [name, setName] = useState("")
    const [job, setJob] = useState("")
    const [status, setStatus] = useState("")
    const [start_time, setStart_time] = useState("")
    const [end_time, setEnd_time] = useState("")
    const ss = (value) => {
        setName(value.name)
        setJob(value.job)
        setStatus(value.status ? 1 : 0)
        setStart_time(value.rangepicker[0])
        setEnd_time(value.rangepicker[1])
    }
    const cz = () => {
        setName("")
        setJob("")
        setStatus("")
        setStart_time("")
        setEnd_time("")
    }

    // 列表渲染
    const listData = async () => {
        let res = await getSchemaListApi({
            pageNum,
            pageSize,
            name,
            job,
            status,
            start_time,
            end_time

        })
        console.log(res);
        const { code, list, total } = res.data
        if (code === 1) {
            setArr(list)
            setTotal(total)
        }
    }

    useEffect(() => {
        listData()
    }, [pageNum,
        pageSize,
        name,
        job,
        status,
        start_time,
        end_time
    ])
    const columns = [
        {
            title: 'id',
            dataIndex: 'id',
        },
        {
            title: '姓名',
            dataIndex: 'name',
        },
        {
            title: '职位',
            dataIndex: 'job',
        },
        {
            title: '职位状态',
            dataIndex: 'type',
        },
        {
            title: '公司',
            dataIndex: 'schema_name',
        },
        {
            title: '公司人数',
            dataIndex: 'person_num',
        },

        {
            title: '状态',
            dataIndex: 'status',
            render: (status) => {
                return (
                    <Switch checked={status}></Switch>
                )
            }
        },
        {
            title: '时间',
            dataIndex: 'create_time',
            render: (item) => {
                return dayjs(item).format('YYYY-MM-DD HH:mm:ss')
            }
        },
        {
            title: '操作',
            render: (item) => (
                <Space>
                    <Button onClick={() => { editFn(item) }}>编辑</Button>
                    <Popconfirm
                        title="是否确认删除"
                        onConfirm={() => { confirm(item.id) }}
                        okText="确认"
                        cancelText="取消"
                    >
                        <Button danger>删除</Button>
                    </Popconfirm>
                    {/* {delBtn && <Button>删除</Button>} */}
                </Space>
            ),
        },
    ];

    // 删除
    const confirm = async (id) => {
        let res = await request.delete('/delSchema', { params: { id: id } })
        console.log(res);
        const { code } = res.data
        if (code === 1) {
            alert('删除成功')
            listData()
        }

    }
    // 新增编辑
    const [show, setShow] = useState(false)
    const [title, setTitle] = useState('')
    const [form] = Form.useForm()
    const gb = () => {
        setShow(false)
        form.resetFields()
    }
    const editFn = (item) => {
        setTitle('编辑')
        setShow(true)
        form.setFieldsValue(item)
    }
    const addFn = () => {
        setTitle('新增')
        setShow(true)
    }
    const onFinish = async (value) => {
        if (value.id) {
            console.log('编辑');
            let res = await request.put('/editSchema', value)
            console.log(res);
            const { code } = res.data
            if (code === 1) {
                alert('编辑成功')
                gb()
                listData()
            }

        } else {
            console.log('新增');
            let res = await request.post('/addSchema', value)
            console.log(res);
            const { code } = res.data
            if (code === 1) {
                alert('新增成功')
                gb()
                listData()
            }
        }
    }
    return (
        <div>
            <SeachForm ss={ss} cz={cz} />
            <Button onClick={() => { addFn() }}>新增</Button>
            <TabCom
                setPageSize={setPageSize}
                setPageNum={setPageNum}
                arr={arr}
                columns={columns}
                pageSize={pageSize}
                pageNum={pageNum}
                total={total}
            />
            <Form />
            <FormBox show={show} title={title} gb={gb} form={form}
                onFinish={onFinish}
            />
        </div>
    )
}

export default OrderList
